<template>
  <div class="filed">
    <div class="filed__label">
      <slot name="label"> {{ label }}<span v-if="showColon">：</span></slot>
    </div>
    <div class="filed__value">
      <slot>
        <van-text-ellipsis
          v-if="openEllipsis"
          :content="value"
          expand-text="展开"
          collapse-text="收起"
          @click-action.stop
        />

        <div v-else>{{ value ? value : emptyValue }}</div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Filed",
  components: {},
  props: {
    label: String,
    showColon: {
      type: Boolean,
      default: true,
    },
    value: String,
    emptyValue: {
      type: String,
      default: "",
    },
    openEllipsis: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  methods: {},
  // vue3
  beforeUnmount() {},
  unmounted() {},
});
</script>

<style scoped lang="scss">
.filed {
  display: flex;
  align-items: start;

  &__label {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;
  }

  &__value {
    flex-grow: 1;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
  }
}
</style>
